<!--
 * @description:
 * @author: cuicui
 * @Date: 2023-11-28 19:51:46
 * @LastEditTime: 2023-11-30 11:47:52
 * @LastEditors: cuicui
-->
<template>
  <a-modal
    :title='currentTitle'
    :width='640'
    destroyOnClose
    :visible='visible'
    :confirmLoading='loading'
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
    v-bind='Object.assign({}, !canEdit ? {footer: null} : {})'
  >
    <a-spin :spinning='loading'>
      <a-form :form='form' v-bind='formLayout'>
        <a-form-item v-show='false'>
          <a-input v-decorator="['id']" />
        </a-form-item>

        <a-form-item label='配置名称'>
          <a-input v-show='canEdit' v-decorator="[
              'configName',
              { rules: [{ required: true, message: '请输入配置名称!' },
             { pattern: namePattern,  message: '请输入合法内容(可输入0到50位（中文、字母，数字，下划线，减号)'}] },
            ]" />
          <div v-show='!canEdit' class='view-item'>{{ model && model.configName }}</div>
        </a-form-item>

        <a-form-item label='所属模块'>
          <a-select
            v-show='canEdit'
            showSearch
            :options='moduleList'
            v-decorator="[
              'moduleDicId',
              { rules: [{ required: true, message: '请选择所属模块!' }] },
            ]">
          </a-select>
          <div v-show='!canEdit' class='view-item'>{{ model && model.moduleName }}</div>
        </a-form-item>

        <a-form-item label='系统'>
          <a-select
            showSearch
            :filterOption='filterOptionFun'
            v-show='canEdit'
            :options='systemList'
            v-decorator="[
              'systemDicId',
              { rules: [{ required: true, message: '请选择系统!' }] },
            ]">
          </a-select>
          <div v-show='!canEdit' class='view-item'>{{ model && model.systemName }}</div>
        </a-form-item>

        <a-form-item label='设备'>
          <a-select
            v-show='canEdit'
            showSearch
            :filterOption='filterOptionFun'
            :options='deviceList'
            v-decorator="[
              'deviceDicId',
              { rules: [{ required: true, message: '请选择设备!' }] },
            ]">
          </a-select>
          <div v-show='!canEdit' class='view-item'>{{ model && model.deviceName }}</div>
        </a-form-item>

        <a-form-item label='点位'>
          <a-select
            v-show='canEdit'
            showSearch
            :filterOption='filterOptionFun'
            :options='pointList'
            v-decorator="[
              'pointDicId',
              { rules: [{ required: true, message: '请选择点位!' }] },
            ]">
          </a-select>
          <div v-show='!canEdit' class='view-item'>{{ model && model.pointName }}</div>
        </a-form-item>


        <a-form-item label='点位键值' v-if='!canEdit'>
          <div class='view-item'>{{ model && model.pointKey }}</div>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { mapState } from 'vuex'
import { findDataDicInfoByType } from '@/api/dataDicInfo'
import { namePattern } from '@/reges'
// 表单字段
const fields = ['id', 'configName', 'moduleDicId', 'systemDicId', 'deviceDicId', 'pointDicId']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    },
    canEdit: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapState({
      moduleList: state => state.dataDicInfo.modules.map(item => {
        return {
          key: item.id,
          label: item.name
        }
      })
    }),
    currentTitle() {
      if (!this.canEdit) {
        return '配置详情'
      }
      return (this.model ? '编辑' : '新增') + '配置'
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 21 }
      }
    }
    return {
      form: this.$form.createForm(this),
      namePattern,
      systemList: [], // 系统
      deviceList: [], // 设备
      pointList: [] // 点位
    }
  },
  created() {
    // 防止表单未注册
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      fields.forEach(v => this.form.getFieldDecorator(v))
      if (this.model) {
        this.form.setFieldsValue(pick(this.model, fields))
      }
    })
    this.findDataDicInfoByType(2, 'systemList')
    this.findDataDicInfoByType(3, 'deviceList')
    this.findDataDicInfoByType(4, 'pointList')
  },
  methods: {
    async findDataDicInfoByType(type, targetData) {
      const result = await findDataDicInfoByType(type)
      this[targetData] = result.map(item => {
        return {
          key: item.id,
          label: item.name
        }
      })
    },
    filterOptionFun(inputValue, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
      )
    }
    // handleSearchPointList (value) {
    //   if (value) {
    //     this.$set(this, 'pointList', this.pointList.filter(item => item.label.indexOf(value) !== -1))
    //   } else {
    //     this.findDataDicInfoByType(4, 'pointList')
    //   }
    // }
  }
}
</script>
